<template>
    <div class="CategoryGrid">
        <!-- 加载中 loading组件 -->
        <div class="loading-wrap" v-if="loading" >
            <van-loading color="#3296fa" vertical size="70">加载中</van-loading>
        </div>
        <van-grid
            :gutter="10"
            :column-num="columnNum"
            :clickable="true"
            v-else-if="appointArr.length"
        >
            <van-grid-item
                :class="{ gridItemBox: columnNum === 3 }"
                v-for="value in appointArr"
                :key="value.itemId"
                @click="tiaozhuan(value)"
            >
                <div class="GridItem" slot="default">
                    <van-image
                        class="GridItem-img"
                        fit="cover"
                        :src="value.imgURL"
                    />
                    <div class="GridItem-mask">
                        <p class="maosu van-ellipsis">
                            {{ value.title }}
                        </p>
                    </div>
                </div>
            </van-grid-item>
        </van-grid>
        <van-empty description="目前暂时没有该类型视频" v-else />
    </div>
</template>

<script>
import { getAllVideos } from '@/api/jia';
export default {
    name: 'VideoResult',
    props: {
        id: {
            type: [Number, String],
            require: true
        },
        // 接收父组件被点击的类型
        genres: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            list: [] || null, // 全部的视频
            appointArr: [], // 筛选后的视频列表数据
            loading: true
        };
    },
    computed: {
        // 计算页面宫格几列显示
        columnNum() {
            if (this.id > 5) {
                return 2;
            }
            return 3;
        }
        // newList() {
        //     return this.list.filter(item => {
        //         if (
        //             item.type === this.genres.type &&
        //             item.Charge === this.genres.Charge &&
        //             this.condition === this.genres.condition
        //         ) {
        //             return item || '目前没有对应类型的视频';
        //         } else if (
        //             item.type === this.genres.type &&
        //             item.Charge === this.genres.Charge
        //         ) {
        //             return item || '目前没有对应类型的视频';
        //         }
        //     });
        // }
    },
    created() {
        this.getAllVideos();
    },
    methods: {
        async getAllVideos() {
            // 获取全部的视频
            try {
                const {
                    data: { list }
                } = await getAllVideos({ id: this.id });
                this.list = list;
                this.getNew();
            } catch (error) {}
        },
        getNew() {
            this.loading = true
            // 按照选择的类型筛选视频
            let arr = this.list.filter(item => {
                if (
                    item.type === this.genres.type + 1 &&
                    item.condition === this.genres.condition + 1 &&
                    item.Charge === this.genres.Charge + 1
                ) {
                    console.log(item);
                    return true;
                } else if (
                    item.type === this.genres.type + 1 &&
                    item.condition === this.genres.condition + 1 &&
                    this.genres.Charge === 0
                ) {
                    console.log(item);
                    return true;
                } else if (
                    item.condition === this.genres.condition + 1 &&
                    item.Charge === this.genres.Charge + 1 &&
                    this.genres.type === 0
                ) {
                    console.log(item);
                    return true;
                } else if (
                    this.genres.type === 0 &&
                    this.genres.Charge === 0 &&
                    item.condition === this.genres.condition + 1
                ) {
                    console.log(item);
                    return true;
                }
            });
            if (arr.length) {
                arr = [...arr, ...arr, ...arr, ...arr, ...arr, ...arr, ...arr];
            }
            this.appointArr = arr;
            this.loading = false
        },
        tiaozhuan(item) {
            this.$router.push(`/episode/${item.videoId}`)
        }
    },
    watch: {
        id() {
            this.getAllVideos();
        },
        // 检查选择的类型，变化调用筛选视频的函数
        genres: {
            // immediate:true,
            deep: true,
            handler() {
                console.log(22);
                this.getNew();
            }
        }
    }
};
</script>

<style scoped lang="scss">
.CategoryGrid {
    background-color: #eeeeee;
}
/deep/.van-grid {
    padding-left: unset !important;
    display: flex;
   justify-content: start;
    .van-grid-item {
        width: 350px;
        height: 200px;
        border: 1px solid #bfbfbf;
        flex-basis: unset !important;
        padding-right: unset !important;
        margin-right: 10px;
        .van-grid-item__content {
            padding: unset;
        }
    }
}
.GridItem {
    position: relative;
    width: 100%;
    height: 100%;
    .GridItem-img {
        width: 100%;
        height: 100%;
    }
    .GridItem-mask {
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 40px;
        bottom: 0;
        color: rgba(255, 255, 255, 100);
        background-color: rgba(0, 0, 0, 0.5);
        padding-top: 14px;
        // line-height: 40px;
        .maosu {
            font-size: 12px;
            margin: 0;
            padding: 0;
            text-align: left;
        }
    }
}
.gridItemBox {
    width: 230px !important;
    height: 324px !important;
}
</style>
